<script lang="ts">
	import type { TrueOrFalseQuestion } from '$lib/api/proto/resource_exam_type_api';

	interface Props {
		question: TrueOrFalseQuestion;
		onChange: (question: TrueOrFalseQuestion) => void;
	}

	let props: Props = $props();

	let question = $state(props.question.question);
	let rightAnswer = $state(props.question.rightAnswer);

	$effect(() => {
		props.onChange({
			question,
			rightAnswer
		});
	});
</script>

<div class="space-y-2">
	<label class="label w-full">
		<span class="label w-[100px] text-right inline-block pr-[10px]">问题:</span>
		<input type="text" class="input w-full" bind:value={question} />
	</label>
	<label class="label w-full">
		<span class="label w-[100px] text-right inline-block pr-[10px]">正确结果:</span>
		<div class="w-full flex gap-2">
			<input
				type="radio"
				name="rightAnswer"
				class="radio"
				checked={rightAnswer}
				onchange={(e) => {
					if (e.currentTarget.checked) {
						rightAnswer = true;
					}
				}}
			/>正确
			<input
				type="radio"
				name="rightAnswer"
				class="radio"
				checked={!rightAnswer}
				onchange={(e) => {
					if (e.currentTarget.checked) {
						rightAnswer = false;
					}
				}}
			/>错误
		</div>
	</label>
</div>
